<template>
  <div class="all">
    <h1>热搜管理</h1>
    <div v-show="number == 1">
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <el-form-item label="热搜标题">
          <el-input
            v-model="form.title"
            placeholder="请输入  热搜标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="热搜内容">
          <el-input
            v-model="form.content"
            placeholder="请输入  热搜内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-select v-model="form.status" placeholder="请选择  启用状态">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left: 130px"
            @click="getFun"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-delete" size="small" @click="del"
            >清空</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button
          icon="el-icon-plus"
          size="small"
          class="action-button"
          type="primary"
          @click="op"
          >新增</el-button
        >
        <el-button
          class="action-button"
          type="danger"
          :disabled="delId.length == 0"
          @click="batchDelete"
          size="small"
          >批量删除</el-button
        >
      </div>
      <div>
        <el-button
          icon="el-icon-refresh"
          size="small"
          circle
          @click="getFun"
        ></el-button>
        <el-button
          icon="el-icon-search"
          size="small"
          circle
          @click="looking"
        ></el-button>
      </div>
    </div>
    <div style="margin: 20px 0 10px">
      <el-tag
        >当前表格已选择
        <h2 style="display: inline">{{ delId.length }}</h2>
        项
        <el-button
          type="text"
          size="small"
          style="padding: 0 7px"
          @click="toggleSelection()"
          >清空</el-button
        >
      </el-tag>
    </div>
    <el-table
      :data="list"
      border
      style="width: 100%"
      ref="multipleTable"
      tooltip-effect="dark"
      class="custom-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="title" label="热搜标题" align="center" />
      <el-table-column prop="content" label="热搜内容" align="center" />

      <el-table-column prop="recDate" sortable label="录入时间" align="center">
      </el-table-column>
      <el-table-column prop="seq" sortable label="顺序" align="center" />
      <el-table-column prop="status" label="启用状态" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="
              convertStatus(scope.row.status) === '启用' ? 'primary' : 'danger'
            "
            disable-transitions
            >{{ convertStatus(scope.row.status) }}</el-tag
          >
        </template>
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="open(scope.row)"
            size="small"
            plain
            icon="el-icon-edit"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="dele(scope.row.hotSearchId)"
            icon="el-icon-delete"
            plain
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="custom-pagination"
      ></el-pagination>
    </div>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="line" label-width="80px" :rules="rules">
        <el-form-item label="标题" prop="text">
          <el-input
            type="text"
            v-model="line.text"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="textarea">
          <el-input
            type="textarea"
            v-model="line.textarea"
            maxlength="255"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input-number
            v-model="line.num"
            controls-position="right"
            @change="handleChange"
            :min="0"
            :max="10000000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="line.radio" label="0">下线</el-radio>
          <el-radio v-model="line.radio" label="1">正常</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="!flag" type="primary" @click="submitForm('form')"
          >确 定</el-button
        >
        <el-button v-if="flag" type="primary" @click="update">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addList, del, got } from "@/api/hotsearch";

export default {
  data() {
    return {
      flag: true,
      form: {
        title: "",
        content: "",
        status: "",
      },
      line: {
        text: "",
        textarea: "",
        num: 0,
        radio: "0",
      },
      rules: {
        text: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        textarea: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      typeList: [
        {
          text: "未启用",
          value: "1",
        },
        {
          text: "启用",
          value: "2",
        },
      ],
      number: 1,
      id: "",
      delId: [],
      list: [],
      recDate: "",
      hotSearchId: "",
      current: 1,
      size: 10,
      total: "",
      dialogVisible: false,
      timestamp: null,
    };
  },
  methods: {
    //获取页面数据
    getFun() {
      this.timestamp = new Date().getTime();
      let params = {
        t: this.timestamp,
        current: this.current,
        size: this.size,
        title: this.form.title,
        content: this.form.content,
        status: this.form.status,
      };
      getList(params).then((res) => {
        console.log(res);
        this.list = res.data.records;
        this.total = res.data.total;
      });
    },
    //状态栏
    convertStatus(status) {
      return status === 1 ? "启用" : "未启用";
    },
    //清空表格
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.delId = [];
      console.log(this.delId);
      for (const item of val) {
        this.delId.push(item.hotSearchId);
      }
    },
    //显示切换
    looking() {
      this.number = this.number === 1 ? 0 : 1;
    },
    //清空表单
    del() {
      (this.form.title = ""), (this.form.content = ""), (this.form.status = "");
    },
    //分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.getFun();

    },
    //关闭添加框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //点击计数器
    handleChange(value) {
      console.log(value);
    },
    //新增
    op() {
      this.dialogVisible = true;
      this.flag = false;
    },
    //新增确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.add();
          this.dialogVisible = false;
          this.getFun();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //新增取消
    cancel() {
      this.dialogVisible = false;
      this.line = {};
    },
    //新增添加数据
    add() {
      this.timestamp = new Date().getTime();
      let data = {
        t: this.timestamp,
        content: this.line.textarea,
        hotSearchId: 0,
        recDate: "2025-03-20 18:51:52",
        title: this.line.text,
        seq: this.line.num,
        status: this.line.radio,
      };
      addList(data).then((res) => {
        console.log(res);
        // this.list = res.data.records;
        // this.total = res.data.total;
      });
    },
    //删除
    dele(hotSearchId) {
      console.log(hotSearchId);
      this.id = hotSearchId;
      console.log(this.id);
      this.$confirm("确定进行[删除]操作??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.delete();
          this.getFun();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除
    batchDelete() {
      this.$confirm(`确定进行[批量删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 点击确定
          del(this.delId).then((res) => {
            if (res.code == "00000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getFun();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除接口
    delete() {
      let data = [this.id];
      console.log(this.id);
      del(data).then((res) => {
        console.log(res);
      });
    },
    //修改
    open(row) {
      this.flag = true;
      console.log(row);
      this.dialogVisible = true;
      this.line.text = row.title;
      this.line.textarea = row.content;
      this.line.num = row.seq;
      this.line.radio = row.status;
      this.recDate = row.recDate;
      this.hotSearchId = row.hotSearchId;
    },
    //确定修改
    update() {
      this.timestamp = new Date().getTime();
      let data = {
        t: this.timestamp,
        content: this.line.textarea,
        hotSearchId: this.hotSearchId,
        recDate: this.recDate,
        title: this.line.text,
        seq: this.line.num,
        status: this.line.radio,
      };
      got(data).then((res) => {
        console.log(res);
      });
      this.dialogVisible = false;
      this.getFun();
    },
  },
  created() {
    this.getFun();
  },
};
</script>

<style scoped>
.all {
  margin: 20px;
}
.block {
  margin: 20px 10px;
  float: right;
}
</style>
